<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.dui{
				color: green;
			}
			.cuo{
				color:red;
			}
		</style>
		<script type="text/javascript">
			function a(){
				var num1 = document.getElementById("name").value;
				var span1 = document.getElementById("namespan");
				var reg1 = /^\w{5,10}$/;
				var resultn =  num1.match(reg1);
				var num2 = document.getElementById("mima").value;
				var span2 = document.getElementById("mimaspan");
				var reg2 = /^\w{10,20}$/;
				var resultm = num2.match(reg2);
				if (resultn) {
					span1.className = "dui";
				}else{
					span1.className = "cuo";
				}
				if (resultm) {
					span2.className = "dui";
				} else{
					span2.className = "cuo";
				}
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>账号</td>
				<td><input type="text" id="name"></td>
				<td><span id="namespan">正确</span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" id="mima"></td>
				<td><span id="mimaspan">错误</span></td>
			</tr>
			<td>
				<button onclick="a()">登陆</button>
			</td>
		</table>
	</body>
</html>
